<template>
  <button type="button" @click="isShow=!isShow">切换</button>
  <transition
      enter-active-class="animate__animated animate__zoomIn"
      leave-active-class="animate__animated animate__zoomInDown">
    <div class="lhz" v-if="isShow"></div>
  </transition>
</template>

<script>
export default {
  name: "LhzAnimate",
  data() {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
button {
  width: 300px;
  height: 100px;
  font-size: 66px;
}

.lhz {
  width: 600px;
  height: 600px;
  background-color: #00AA00;
}
</style>